<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .clock{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            border-radius: 50%;
            position: relative;
            background-image: url("./images/bg.png");
            background-size: cover;
        }

        .hou{
            position: absolute;
            height: 40%;
            width: 10px;
            background-color: black;
            left: 0;
            right: 0;
            bottom: 50%;
            margin: 0 auto;

            transform-origin: bottom center;
            transform: rotateZ(0deg);

            animation: clock-run 7200s linear infinite;
        }

        .min{
            position: absolute;
            height: 46%;
            width: 6px;
            background-color: black;
            left: 0;
            right: 0;
            bottom: 50%;
            margin: 0 auto;

            transform-origin: bottom center;
            transform: rotateZ(90deg);

            animation: clock-run 600s linear infinite;
        }

        .sec{
            position: absolute;
            height: 48%;
            width: 4px;
            background-color: red;
            left: 0;
            right: 0;
            bottom: 50%;
            margin: 0 auto;

            transform-origin: bottom center;

            animation: clock-run 10s steps(60) infinite;
        }

    /*    设置关键帧*/
        @keyframes clock-run {
            from{
                transform: rotateZ(0deg);
            }

            to{
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>

<div class="clock">

    <div class="hou"></div>
    <div class="min"></div>
    <div class="sec"></div>

</div>

</body>
</html>